<template>
  <iLayout left>
    <section slot="title">字典管理</section>
    <section slot="operation">
      <el-button type="primary" round size="mini" icon="el-icon-plus" @click="addRoot">根目录</el-button>
      <el-button type="primary" round size="mini" icon="el-icon-plus" @click="addDictionnary">新增</el-button>
      <el-button type="warning" round size="mini" icon="el-icon-edit" @click="modDictionnary">修改</el-button>
      <el-button type="danger" round size="mini" icon="el-icon-delete" @click="delDictionnary">删除</el-button>
    </section>
    <section slot="left">
      <iTree :data="tree" :props="props" @handleNodeClick="menuNodeClick"></iTree>
    </section>
    <section slot="right">
      <section class="form">
        <section class="form-title">{{ title }}</section>
        <section class="form-body">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="名称" prop="name">
              <el-input type="text" v-model="form.name" size="max" :readonly="isReadonly" placeholder="请输入设备类型名称"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark" size="max" resize="none" :readonly="isReadonly" placeholder="请输入设备类型备注"></el-input>
            </el-form-item>
          </el-form>
        </section>
        <section class="form-action" v-if="isAdd || isEdit">
          <el-button type="default" icon="el-icon-close" round title="取消" @click="cancel"></el-button>
          <el-button type="primary" icon="el-icon-check" round title="确认" @click="confirm"></el-button>
        </section>
      </section>
    </section>
  </iLayout>
</template>

<script>
export default {
  name: 'Dictionaries',
  data: () => ({
    tree: [
      {
        id: '1231',
        name: '根目录',
        remark: '123',
        children: []
      }
    ],
    props: {
      children: 'children',
      label: 'name'
    },
    title: '字典详情',
    form: {},
    rules: {},
    isReadonly: true
  }),
  methods: {
    menuNodeClick(data) {
      this.form = JSON.parse(JSON.stringify(data.data))
    },
    addRoot() {},
    addDictionnary() {},
    modDictionnary() {},
    delDictionnary() {}
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 30rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 3rem auto;
  box-sizing: border-box;

  .form-title {
    width: 100%;
    font-size: 1.5rem;
    margin: 2rem 0;
  }

  .form-body {
  }

  .form-action {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
  }
}
</style>